<template>
	<view>
		<nav-bar title="充电月卡"></nav-bar>
		<view :style="{'margin-top':navHeight+'px'}" style="padding:34rpx 30rpx;position: relative;">
			<view class="tip">月卡充电，更省钱！</view>
			<view>
				<view class="cell" @click.stop="vip_Change(item)" v-for="(item,index) in dataList" :key="index">
					<image class="bg" :src="selectVipObj.id==item.id?'https://oss.jxhecong.com/v2/image/vip_bg_active@2x.png':'https://oss.jxhecong.com/v2/image/vip_bg_white@2x.png'"></image>
					<view class="content">
						<view>
							<view :class="selectVipObj.id==item.id?'name':'un-active-name'">单月卡（30天）</view>
							<view :class="selectVipObj.id==item.id?'sub-name':'un-sub-name'">可充电60次，每次0.5元</view>
						</view>
						<view class="price-box" :style="{'color':selectVipObj.id==item.id?'#FFFFFF':'#303133'}">
							<text>¥</text>
							<text>30</text>
							<text>.00</text>
						</view>
					</view>
				</view>
				<view class="sub-tip">注意：仅可在本站点（城关镇光明南路小区）使用。</view>
				<view>
					<view class="pay-title">支付方式</view>
					<view class="wallet-box">
						<view class="wallet-cell" @click.stop="payMethod=0">
							<image class="icon" src="https://oss.jxhecong.com/v2/image/wallet@2x.png"></image>
							<view class="wallet-name">账户余额支付<text style="color: #909399;font-size:24rpx;">（余额:100）</text></view>
							<image class="select" :src="payMethod==0?'https://oss.jxhecong.com/v2/image/xuanze-active.png':'https://oss.jxhecong.com/v2/image/xuanze.png'"></image>
						</view>
						<view class="line"></view>
						<view class="wallet-cell" @click.stop="payMethod=1">
							<image class="icon" src="https://oss.jxhecong.com/v2/image/wallet_wx@2x.png"></image>
							<view class="wallet-name">微信支付</view>
							<image class="select" :src="payMethod==1?'https://oss.jxhecong.com/v2/image/xuanze-active.png':'https://oss.jxhecong.com/v2/image/xuanze.png'"></image>
						</view>
					</view>
				</view>
				<view class="buy">¥30.00 立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '../components/navBar.vue'
	var globalData=getApp({allowDefault: true}).globalData
	export default{
		components:{navBar},
		data(){
			return{
				navHeight:0,
				selectVipObj:{id:1,value:1},
				dataList:[{
					id:'1',
					value:1
				},{
					id:'2',
					value:2
				}],
				payMethod:0
			}
		},
		onLoad() {
			this.navHeight=globalData.titleHeight;
		},
		methods:{
			vip_Change(item){
				this.selectVipObj=item;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cell{
		height:140rpx;
		position: relative;
		margin-bottom:12rpx;
	}
	.bg{
		height:140rpx;
		width:100%;
	}
	.content{
		position: absolute;
		left:0rpx;
		right: 0rpx;
		top:0rpx;
		bottom:0rpx;
		display:flex;
		justify-content: space-between;
		align-items: center;
		padding:0rpx 34rpx;
	}
	.tip{
		color: #303133;
		font-size:32rpx;
		font-weight: bold;
		margin-bottom:16rpx;
	}
	.name{
		color:#FFFFFF;
		font-size:32rpx;
		font-weight: bold;
	}
	.un-active-name{
		color:#303133;
		font-size:32rpx;
	}
	.sub-name{
		color: #FFFFFF;
		font-size: 24rpx;
		margin-top:8rpx;
	}
	.un-sub-name{
		color: #606266;
		font-size: 24rpx;
		margin-top:8rpx;
	}
	.price-box{
		color:#FFFFFF;
		font-size:28rpx;
	}
	.price-box>text:nth-child(2){
		font-size:60rpx;
		font-weight: bold;
	}
	.sub-tip{
		color:#FA3534;
		font-size:24rpx;
		margin-left:10rpx;
	}
	
	.pay-title{
		color:#303133;
		font-size:32rpx;
		font-weight: bold;
		margin-top:50rpx;
		margin-bottom:18rpx;
	}
	.wallet-box{
		background: #FFFFFF;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
		border-radius: 9px;
		.wallet-cell{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height:102rpx;
			padding:0rpx 30rpx;
			.icon{
				width:42rpx;
				height:42rpx;
			}
			.wallet-name{
				color:#303133;
				font-size:32rpx;
				flex:1;
				margin-left:24rpx;
			}
			.select{
				width:36rpx;
				height:36rpx;
			}
		}
	}
	.line{
		background-color:#F3F4F6;
		height:1rpx;
	}
	.buy{
		position: fixed;
		left:30rpx;
		right:30rpx;
		bottom:50px;
		background: #6ABF6C;
		box-shadow: 0px 1px 2px 0px rgba(8,139,120,0.3);
		border-radius: 60px;
		height:45px;
		line-height:45px;
		text-align: center;
		color:#FFFFFF;
		font-size:32rpx;
	}
</style>
